<template>
  <el-card class="tree-card">
    <!-- 用了一个行列布局 -->
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="height: 40px"
    >
      <el-col>
        <el-button type="primary" @click="addFn">添加页面</el-button>
      </el-col>
      <el-col :span="20">
        <el-row type="flex" justify="end">
          <el-col class="you">
            <el-input v-model="Contains" placeholder="请输入内容" /> <el-button @click="shanxuanFn">筛选</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table border :data="pagemanlist" style="width: 100%">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="address" label="操作">
        <template v-slot="{row}">
          <el-button type="success" @click="bianjiFn(row.id)">编辑</el-button>
          <el-button type="danger" @click="delerFn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :page-size="limit"
      :total="titleContains"
      @current-change="fenyeFn"
    />
    <!-- 弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="formData" :rules="rutes" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="formData.content" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addqrenFn">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>

</template>

<script>
import { getpagesList, getaddpage, getdelpage, gettotil, getpages, getbianji } from '@/api/management'
export default {
  data() {
    return {
      dialogVisible: false,
      pagemanlist: [],
      limit: 5,
      start: 0,
      Contains: '',
      titleContains: 0,
      formData: {
        title: '',
        content: ''

      },
      rutes: {
        title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]

      }
    }
  },
  async created() {
    this.getpagesList()
    const res = await gettotil()
    console.log(res)
    this.titleContains = res.data
  },
  methods: {
    async getpagesList() {
      const res = await getpagesList({
        _start: this.start,
        _limit: this.limit
      })
      this.pagemanlist = res.data

      console.log(res, 52)
    },
    // 分页
    fenyeFn(car) {
      this.start = car === 1 ? 0 : (car - 1) * this.limit
      this.getpagesList()
    },
    // 添加
    addFn() {
      this.dialogVisible = true
    },
    // 确认按钮
    async addqrenFn() {
      this.$refs.form.validate()
      if (this.formData.id) {
        // 编辑
        await getbianji(this.formData)
      } else {
        // 新增
        await getaddpage(this.formData)
      }
      this.getpagesList()
      this.dialogVisible = false
    },
    // 删除
    async delerFn(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await getdelpage(id)
        this.getpagesList()
        this.$message.error('删除成功')
      }).catch(() => {

      })
    },
    // 编辑
    async bianjiFn(id) {
      this.dialogVisible = true
      const { data } = await getpages(id)
      this.formData = data
    },
    // 筛选
    async shanxuanFn() {
      const res = await getpagesList({ title_contains: this.Contains })
      // console.log(res, 139)
      this.pagemanlist = res.data
    }
  }
}
</script>

<style lang='scss'  scoped>
.tree-card {
  margin-top: 20px;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 14px;

  .you {
    display: flex;
    .el-input {
      width: 100%;
    }
  }
  .el-table {
    margin-top: 30px;
  }
}
</style>

